<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@ include file="/common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>"/>
<style type="text/css">
	ul.dish-list {
		margin: 0px;
		padding: 0px 5px;
		list-style: none outside none;
	}
	ul.dish-list li {
		list-style:none;
		float: left;
		margin: 0 10px 20px;
	    width: 200px;
	}
	ul.dish-list div.item input.text, input.title, textarea, select {
		margin: 2px 0px;
	}
</style>

<script type="text/javascript">
jQuery(function($) {
	$('#dishes .fancybox-thumbs').fancybox({
		prevEffect : 'none',
		nextEffect : 'none',

		closeBtn  : true,
		arrows    : true,
		nextClick : true,

		helpers : {
			title	: {
				type: 'outside'
			},
			thumbs : {
				width  : 50,
				height : 40
			},
			overlay	: {
				opacity : 0.8,
				css : {
					'background-color' : '#000'
				}
			},
		}
	});
});

function bindOrderNowEvent($orderBox) {
	$(".orderNow", "#dishes").click(function() {
		var $item = $(this).parent();
		var itemId = $item.attr("id");
		var desc = $item.find(".desc font").text();
		var unitPrice = $item.find(".price input:first").val();
		var selnums = parseInt($item.find(".price select").val());
		var exist = false;

		// recalc the sum amount
		recalcAmount(unitPrice, selnums);
		
		$orderBox.find("tr").find("input:first").each(function(index, domEle) {
			if(itemId == $(this).val()) {
				var $quantity = $(this).parent().find("td:eq(2) input:first");
				$quantity.val(parseInt($quantity.val()) + selnums);

				exist = true;
				return false;
			}
		});

		if(exist) return;
		var $orderRow = $orderBox.find("tr:first");
		var $copyRow = $orderRow.clone(true);
		updateIndex($copyRow.find("input,select"), $orderBox.find("tr").length-1);

		$copyRow.find("input:first").val(itemId);
		$copyRow.find("td:first span:first").text(desc);
		$copyRow.find("td:eq(1) span:first").text(unitPrice);
		$copyRow.find("td:eq(2) input:first").val(selnums);
		
		$copyRow.appendTo($orderRow.parent());
		$copyRow.show();
	});
}

function updateIndex($items, index) {
	
	$items.each(function(idx, domEle) {
		$(this).attr("name", $(this).attr("name").replace(/orderList\[\d+\]/g, 'orderList['+index+']'));
		$(this).removeAttr("disabled"); 
	});
	
}

</script>

<ul class="dish-list">
	<c:forEach items="${page.result}" var="dish">
		<li>
			<div class="item" id="${dish.id }">
				<div class="pic">
					<a class="fancybox-thumbs" data-fancybox-group="thumb" href="${dish.zoomLocation }" title="香辣回锅肉饭">
						<img src="${dish.iconLocation }" />
					</a>
				</div>
				<div class="desc">
					<a class="permalink" href="#" target="_blank">
						<font style="font-weight:bold;">${dish.name }</font></a>
				</div>
				<div class="price">
					<span>一口价</span>
					<strong>${dish.price }元/份</strong>
					<input type="hidden" value="${dish.price }" />
					<select name="selnums">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
					</select>份
				</div>
				<div class="orderNow" style="margin-top:5px;">
					<img border="0" style="cursor:pointer;" src="common/images/btn/order.gif">
				</div>
			</div>
		</li>
	</c:forEach>
</ul>
